class Vue {
    constructor(options) {
        this.data = options.data;
        Observe(this.data)

        //proxy
        Object.keys(this.data).forEach((key) => {
            Object.defineProperty(this,key,{
                enumerable: true,
                configurable: true,
                get() {
                    return this.data[key]
                },
                set(newValue) {
                    this.data[key] = newValue
                }
            })
        })
        Compile(options.el,this)
    }
}

function Observe(obj) {
    if(!obj || typeof obj !== "object") return

    Object.keys(obj).forEach((key) => {
        let value = obj[key]
        Observe(value)

        Object.defineProperty(obj,key,{
            enumerable: true,
            configurable: true,

            get(){
                console.log(`some one get ${key}`)
                return value
            },
            set(newValue){
                value = newValue
            }
        })
    })
}

function Compile(el,vm) {
    ////获知el对应的DOM元素
    vm.el = document.querySelector(el)

    //创建文档碎片，提高DOM操作的性能（在内存里修改dom元素，而不是在页面上修改dom元素，这样的不会引起重绘）
    const fragment = document.createDocumentFragment();

    while((childNode = vm.el.firstChild)){
        // const childNode = vm.el.firstChild
        // console.log(childNode);
        fragment.appendChild(childNode)
    }
    console.log(fragment);
    replace(fragment);

    //进行模板编译
    vm.el.appendChild(fragment)
}
